<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="form" :model="formData" labelWidth="60px">
				<!-- <uni-forms-item label="" name="id"> -->
				<view class="flex pt-5 pb-5 align-center items-center justify-center margin-bottom-xl margin-top-sm">
					<view>电子秤状态</view>
					<view
						:class="formData.communicateStatus===null ? 'lamp-gray' : formData.communicateStatus ? 'lamp-green':'lamp-red' ">
					</view>
					<view>通讯状态</view>
				</view>
				<uni-forms-item label="电子秤" name="scaleName">
					<uni-easyinput v-model="formData.scaleName" disabled />
				</uni-forms-item>
				<!-- </uni-forms-item> -->
				<uni-forms-item label="电子秤" v-if="isShow" name="scaleId" disabled="true">
					<uni-data-select v-model="value" :localdata="range" @change="elecSelectedFun"
						disabled="true"></uni-data-select>
				</uni-forms-item>

				<uni-forms-item label="二维码" name="id">
					<uni-easyinput v-model="formData.id" placeholder="" :focus="inpFocus" @blur="inpBlur"
						ref="nextFocus" @confirm="handleQuery" :disabled="isDisabled" />
				</uni-forms-item>
				<uni-forms-item label="重量" name="weight">
					<uni-easyinput v-model="formData.weight" placeholder="" disabled />
				</uni-forms-item>
				<uni-forms-item label="二次平衡测试" name="balanceTwice" class="margin0">
					<uni-easyinput style="margin-bottom: 0" type="number" autoHeight v-model="formData.balanceTwice"
						ref="thirdFocus" placeholder="请输入" />
				</uni-forms-item>
			</uni-forms>
			<view class="uni-form-item word-wrap">
				<view class="" name="bz"> 扫描数据：{{formData.bz}}</view>
			</view>
		</view>
		<view class="footer-btn">
			<button type="primary" @click="submitForm">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		toast
	} from "../../../utils/common"
	import {
		getWeight,
		getElecSelected,
		getElecStatus,
		savaElecSelected,
		updateMaWeight,
		updateWeight
	} from "@/api/longyi/weight/Index.js"

	export default {
		data() {
			return {
				inpFocus: true,
				value: null,
				range: [],
				elecInfo: [],
				elecSelected: '',
				preInfoData: {
					id: '',
					weight: '',
					msg: ''
				},
				formData: {
					scaleId: '',
					id: '',
					weight: '',
					communicateStatus: null,
					proType: '',
					orderNo: '',
					flowWater: '',
					scaleId: '',
					balanceTwice: '',
					bz: '',
					scaleName: ''
				},
				statusSelected: {
					ip: '',
					port: ''
				},
				ipPortSelected: {
					id: 0,
					name: '',
					ip: '',
					port: 0
				},
				loading: false,
				isShow: false,
				isDisabled: false,
				rules: {
					value: {
						rules: [{
							required: true,
							errorMessage: '电子秤不能为空'
						}]
					}
				}
			}
		},
		onReady() {
			this.focusInput()
			this.$refs.form.setRules(this.rules)
			this.getType()
		},
		methods: {
			inpBlur() {
				this.inpFocus = false
			},
			// 电子秤查询
			getType() {
				getWeight().then(response => {
					this.elecInfo = response.data
					getElecSelected().then(response2 => {
						this.elecSelected = response2.data
						for (let i in this.elecInfo) {
							this.range.push({
								value: this.elecInfo[i].id,
								text: this.elecInfo[i].name
							})
							if (this.elecSelected.id === this.elecInfo[i].id) {
								this.value = this.elecSelected.id
								this.formData.scaleId = this.elecSelected.id
								this.formData.scaleName = this.elecSelected.name
								this.statusSelected.port = this.elecSelected.port
								this.statusSelected.ip = this.elecSelected.ip
								getElecStatus(this.statusSelected).then(response => {
									this.formData.communicateStatus = response.data
								})
							}
						}
					})
				})
			},
			/** 选择电子秤 */
			elecSelectedFun(value) {
				//获取选中的电子秤信息
				for (let i in this.elecInfo) {
					if (value === this.elecInfo[i].id) {
						this.ipPortSelected.id = this.elecInfo[i].id
						this.ipPortSelected.port = this.elecInfo[i].port
						this.ipPortSelected.ip = this.elecInfo[i].ip
						this.ipPortSelected.name = this.elecInfo[i].name
						this.ipPortSelected.scaleId = this.elecInfo[i].id
						this.statusSelected.port = this.elecInfo[i].port
						this.statusSelected.ip = this.elecInfo[i].ip
					}
				}
				this.formData.scaleId = this.ipPortSelected.scaleId
				savaElecSelected(this.ipPortSelected).then(response => {
					getElecStatus(this.statusSelected).then(response2 => {
						this.formData.communicateStatus = response2.data
						this.inpFocus = true
					})
				})
			},
			//扫描内码获取重量
			handleQuery() {
				if (!this.value) {
					this.$modal.msgError("请选择电子秤！")
					return
				}

				if (this.formData.scaleId != 5) {
					this.$modal.msgError("请确定电子秤！")
					return
				}


				const ipPort = {
					ip: '',
					port: null
				}
				ipPort.ip = this.statusSelected.ip
				ipPort.port = this.statusSelected.port
				this.formData.bz = this.formData.id
				updateMaWeight(ipPort).then(response => {
					this.formData.weight = response.data
					this.focusInput2()
				}).catch(error => {
					uni.showModal({
						title: '错误信息',
						content: error.data.msgError,
						showCancel: false, // 如果不需要取消按钮，可以设置为false
						maskClickable: false // 禁止点击遮罩层关闭弹窗
					});
					this.formData.bz = "提交失败，请重试！"
				});
			},
			changeInputDisabled(val) {
				this.isDisabled = val;
				this.inpFocus = true;
			},
			submitForm() {
				let balanceTwiceVal = Number(this.formData.balanceTwice)
				if (balanceTwiceVal < 100 || balanceTwiceVal > 999) {
					toast("输入的数值在100-1000之间");
					return;
				}

				updateWeight(this.formData).then(response => {
					this.$modal.msgSuccess("操作成功，" + response.msg)
					this.inpFocus = true
					this.formData.bz = this.formData.id
					this.formData.id = ''
					this.formData.weight = ''
					this.focusInput()
				}).catch(error => {
					this.changeInputDisabled(true);
					let that = this;
					uni.showModal({
						title: '错误信息',
						content: error,
						showCancel: false,
						confirmText: '确定', // 确定按钮的文本
						success: function(res) {
							if (res.confirm) {
								that.changeInputDisabled(false);
							}
						}
					});
				})
			},
			focusInput() {
				this.$nextTick(() => {
					this.$refs.nextFocus.focused = true
					this.$refs.thirdFocus.focused = false
				})
			},
			focusInput2() {
				this.$nextTick(() => {
					this.$refs.nextFocus.focused = false
					this.$refs.thirdFocus.focused = true
				})
			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
		margin: 10px auto 66px;
	}

	.lamp-gray {
		width: 20px;
		height: 20px;
		display: inline-block;
		border-radius: 50%;
		margin: auto 10px;
		border: 1px solid #9E9E9E;
		background: #9E9E9E;
		box-shadow: 1px 1px 27px #9E9E9E;
	}

	.lamp-green {
		width: 20px;
		height: 20px;
		display: inline-block;
		border-radius: 50%;
		margin: auto 10px;
		border: 1px solid #1b841c;
		background: #1b841c;
		box-shadow: 1px 1px 27px #1b841c;
	}

	.lamp-red {
		width: 20px;
		height: 20px;
		display: inline-block;
		border-radius: 50%;
		margin: auto 10px;
		border: 1px solid #f56c6c;
		background: #f56c6c;
		box-shadow: 1px 1px 5px #f56c6c;
	}

	.container {
		overflow: hidden;
	}

	.footer-btn {
		padding: 15px;
		background-color: #fff;
		margin-top: 66px;
		position: fixed;
		width: 100%;
		bottom: 0;
	}

	.word-wrap {
		overflow-wrap: break-word;
	}

	// @media (max-width: 768px) {
	//   .col-big-btn{
	//     text-align: center;
	//     .big-btn{
	//       width: 80%;
	//     }
	//   }
	// }
</style>